const result = document.getElementById('result')
const filter = document.getElementById('filter')
const listItems = []


filter.addEventListener('input', (e) => filterData(e.target.value))


function getData() {
    let contactsList = [];
    fetch('https://randomuser.me/api?results=50').then((res) => {
        res.json().then(r => {
            contactsList = r.results.concat()

            result.innerHTML = ``

            contactsList.forEach(user => {

                const li = document.createElement('li')

                listItems.push(li)

                li.innerHTML = `
            <img src="${user.picture.large}" alt="${user.name.first}">
            <div class="user-info">
                <h4>${user.name.first} ${user.name.last}</h4>
                <p>${user.location.city}, ${user.location.country}</p>
            </div>
        `

                result.appendChild(li)
            });
        })
    })
}

function filterData(searchItem) {
    listItems.forEach(item => {
        if (item.innerText.toLowerCase().includes(searchItem.toLowerCase())) {
            item.classList.remove('hide')
        } else {
            item.classList.add('hide')
        }
    })
}

getData()
